<template>
<view class="mysend">
  <u-tabs 
  :list="tablist" 
  :current="active" 
    itemStyle="font-size:14px;lineHeight:88rpx;background:#fff" 
    lineWidth="40" 
    @change="onTabChange" 
    lineColor="#ee0a24"
    :activeStyle="{
      color: '#303133',
      fontWeight: 'bold',
      transform: 'scale(1.05)'
    }"
    :inactiveStyle="{
      color: '#606266',
      transform: 'scale(1)'
    }"
    >
  </u-tabs>
    <view class="mysend__list">
      <view v-for="(ite, index2) in datalist" :key="index2" class="mysend__list__item">
        <view class="mysend__list__item--time">
          <view class="mysend__list__item--time__time1">
            <image src="https://medusa-small-file-1253272780.cos.ap-shanghai.myqcloud.com/gruul/20210531/96c4f6e4115845189d778ce7bd26ef1b.png"></image>
            <view>{{ ite.createDate }}</view>
          </view>
          <view class="mysend__list__item--time__time2">{{ ite.createTime }}</view>
        </view>
        <view class="mysend__list__item--img">
          <view v-for="(items, index) in ite.articleImgs" :key="index" class="mysend__list__item--img__item">
            <image :src="items"></image>
          </view>
        </view>
        <view class="mysend__list__item--text">
          <view class="mysend__list__item--text__text1" v-if="ite.edStatus==0">
            等待您的寄出
          </view>
          <view class="mysend__list__item--text__text1" v-if="ite.edStatus==1">您已寄出</view>
          <view class="mysend__list__item--text__text1" v-if="ite.edStatus==2">交易已取消</view>
          <view class="mysend__list__item--text__text2">
            <view class="btn red" @tap="topage" v-if="ite.edStatus==0" :data-id="ite.id">
              去寄出
            </view>
            <!-- <view class="btn black" wx:if="{{ ite.edStatus==0 }}" bind:tap="cancal" data-id="{{ite.id}}">
                              取消订单
                          </view> -->
            <view class="btn black" v-if="ite.edStatus==2" @tap="del" :data-id="ite.id">
              删除订单
            </view>
            <view class="btn red" v-if="ite.edStatus==1" @tap="tologistics" :data-item="ite">
              物流详情
            </view>
          </view>
        </view>
      </view>
    </view>
</view>
</template>
<script lang='ts'>
import { Component, Vue} from 'vue-property-decorator'
import {
  getRecyclingList,
  putCancalRecycling,
  delRecycling,
} from "@/api/modules/user";
import mIcon from "@/components/m-icon/m-icon.vue"
@Component({components:{
    mIcon
}})
export default class Mysend extends Vue {
    active:number=0
    tablist=[
      {
        name: "全部",
        id: 0,
      },
      {
        name: "待寄出",
        id: 1,
      },
      {
        name: "已寄出",
        id: 2,
      },
    ]
    datalist:Array<any>=[]
    dataparams={
      orderStatus: 0,
      page: 1,
      size: 10,
    }
onShow() {
    this.setData({
      ["dataparams.page"]: 1,
    });
    getRecyclingList(this.dataparams).then(res => {
      res.forEach(item => {
        const articleImgs = item.articleImgs.split(",");
        item.articleImgs = articleImgs;
      });
      this.setData({
        datalist: res,
      });
    });
  }
onReachBottom() {
    this.setData({
      ["dataparams.page"]: this.dataparams.page + 1,
    });
    getRecyclingList(this.dataparams).then(res => {
      const list1 = this.datalist;
      const list2 = res;
      list2.forEach(item => {
        const articleImgs = item.articleImgs.split(",");
        item.articleImgs = articleImgs;
      });
      const list = list1.concat(list2);

      this.setData({
        datalist: list,
      });
    });
  }

  onTabChange({id}) {
    this.setData({
      ["dataparams.page"]: 1,
      ["dataparams.orderStatus"]: id,
      active: id,
    });
    getRecyclingList(this.dataparams).then(res => {
      res.forEach(item => {
        const articleImgs = item.articleImgs.split(",");
        item.articleImgs = articleImgs;
      });
      this.setData({
        datalist: res,
      });
    });
  }

  topage({
    currentTarget: {
      dataset: { id },
    },
  }) {
    uni.navigateTo({
      url: "/subcontract/pages/sendlogistics/sendlogistics?id=" + id,
    });
  }
    cancal({
    currentTarget: {
      dataset: { id },
    },
  }) {
    putCancalRecycling(id)
      .then(() => {
        this.$Popup.toast("取消成功");
        this.setData({
          ["dataparams.page"]: 1,
          ["dataparams.orderStatus"]: this.active,
        });
        getRecyclingList(this.dataparams).then(res => {
          res.forEach(item => {
            const articleImgs = item.articleImgs.split(",");
            item.articleImgs = articleImgs;
          });
          this.setData({
            datalist: res,
          });
        });
      })
      .catch(err => {
        this.$Popup.toast("取消失败");
      });
  }
    del({
    currentTarget: {
      dataset: { id },
    },
  }) {
    delRecycling(id)
      .then(() => {
        this.$Popup.toast("删除成功");
        this.setData({
          ["dataparams.page"]: 1,
          ["dataparams.orderStatus"]: this.active,
        });
        getRecyclingList(this.dataparams).then(res => {
          res.forEach(item => {
            const articleImgs = item.articleImgs.split(",");
            item.articleImgs = articleImgs;
          });
          this.setData({
            datalist: res,
          });
        });
      })
      .catch(err => {
        this.$Popup.toast("删除失败");
      });
  }

  tologistics({
    currentTarget: {
      dataset: { item },
    },
  }) {
    let shipperType = "sf";
    if (item.shipmentName === "顺丰快递") {
      shipperType = "sf";
    }
    if (item.shipmentName === "中通快递") {
      shipperType = "zt";
    }
    if (item.shipmentName === "圆通快递") {
      shipperType = "yt";
    }
    if (item.shipmentName === "韵达快递") {
      shipperType = "yd";
    }
    if (item.shipmentName === "百世快递") {
      shipperType = "ht";
    }
    const data = {
      image: item.articleImgs[0],
      orderDelivery: {
        shipperType,
        shipmentName: item.shipmentName,
        waybillNo: item.shipmentNumber,
      },
    };
    uni.navigateTo({
      url: `/subcontract/pages/senddelivery/senddelivery?data=${encodeURIComponent(
        JSON.stringify(data),
      )}`,
    });
  }
}
</script>
<style lang="scss" scoped>
page{
    background: #EEEEEE;
}
.mysend{
    &__list{
        width: 100%;
        font-weight: 500;
        &__item{
            @include flex(center,center);

            flex-direction: column;
            justify-content: flex-start;
            width: 100%;
            height: 330rpx;
            background-color: #fff;
            padding: 0 28rpx;
            margin-top: 20rpx;
            &--time{
                @include flex(space-between,center);

                width: 100%;
                height: 73rpx;
                font-size: 24rpx;
                color: #797979;
                border-bottom: 2rpx solid #F7F7F9;
                &__time1{
                    @include flex(flex-start,center);

                    image{
                        width: 26rpx;
                        height: 26rpx;
                    }
                    view{
                        margin-left: 20rpx;
                    }
                }
                &__time2{
                    font-size: 24rpx;
                    color: #797979;
                }
            }
            &--img{
                @include flex(flex-start,center);

                width: 100%;
                height: 158rpx;
                border-bottom: 1rpx solid #F7F7F9;
                &__item{
                    width: 145rpx;
                    height: 133rpx;
                    border-radius: 10rpx;
                    margin: 0 9rpx;
                    image{
                        width: 145rpx;
                        height: 133rpx;
                        border-radius: 10rpx;
                    }
                }
            }
            &--text{
                @include flex(space-between,center);

                width: 100%;
                height: 95rpx;
                &__text1{
                    font-size: 24rpx;
                    color: #FB315D;

                    background: linear-gradient(0deg, #FF7350 0%, #FDB696 100%);
                    -webkit-background-clip: text;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
                &__text2{
                    @include flex(space-between,center);
                    flex-direction: row-reverse;
                    width: 305rpx;
                    flex-wrap: wrap;
                    .btn{
                        width: 140rpx;
                        height: 60rpx;
                        font-size: 24rpx;
                        border-radius: 10rpx;
                        text-align: center;
                        line-height: 60rpx;
                        background: #fff;
                    }
                    .red{
                        border: 2rpx solid #FF7350;

                        background: linear-gradient(0deg, #FF7350 0%, #FDB696 100%);
                        -webkit-background-clip: text;
                        background-clip: text;
                        -webkit-text-fill-color: transparent;
                        
                    }
                    .black{
                        border: 2rpx solid #797979;
                        color: #797979;
                    }
                }
            }
        }
    }
}
</style>